/* The CSS imports */

@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
/* font-family: 'Bungee', sans-serif; */

@import url("https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap");
/* font-family: 'Rubik Moonrocks', sans-serif; */

@import url("https://fonts.googleapis.com/css2?family=Rouge+Script&display=swap");
/* font-family: 'Rouge Script', cursive; */

@font-face {
  font-family: "love";
  src: url("https://db.onlinewebfonts.com/t/d353583e5cdf878d047eae178df5b757.eot");
  src: url("https://db.onlinewebfonts.com/t/d353583e5cdf878d047eae178df5b757.eot?#iefix")
      format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/d353583e5cdf878d047eae178df5b757.woff2")
      format("woff2"),
    url("https://db.onlinewebfonts.com/t/d353583e5cdf878d047eae178df5b757.woff")
      format("woff"),
    url("https://db.onlinewebfonts.com/t/d353583e5cdf878d047eae178df5b757.ttf")
      format("truetype"),
    url("https://db.onlinewebfonts.com/t/d353583e5cdf878d047eae178df5b757.svg#Stars & Love Bottom Heavy")
      format("svg");
}

.body {
font-family: psan;
}

@font-face {
  font-family: psan;
  src: url(fonts\psan.tff);
}
html {
  scroll-behavior: smooth;
}

.scrolly::-webkit-scrollbar {
  display: none;
}

/* The hover effects for the text */
.hovr {
  position: relative;
}

.hovr::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: #c5c5f9;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.4s ease-in-out;
}

.hovr:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.clicko {
  background-color: #bfdbfe;
  transition: 0.5s;
}

.clicko:hover {
  background-color: #adffb0;
  color: rgb(0, 0, 0);
  transition: 0.5s;
}

.brand-img {
  filter: grayscale(100%);
  transform: scale(1);
  transition: filter 0.7s ease-in, transform 0.4s ease-out;
}

.brand-img:hover {
  filter: grayscale(0%);
  transform: scale(1.2);
}

/* the navbar */

#navigate {
  top: 0;
  width: 100%;
  transition: top 0.3s;
}

/* typewritter css */

.typewrite > .wrap {
  position: relative;
}

.typewrite > .wrap::after {
  content: "";
  display: inline-block;
  width: 0.03em;
  height: 1em;
  margin-top: 20px;
  background-color: #c5c0c0;
  position: absolute;
  right: 0;
  animation: cursor-blink 0.5s infinite;
}

@keyframes cursor-blink {
  0%,
  100% {
    background-color: #fff;
  }
  50% {
    background-color: transparent;
  }
}